<template>
	<view v-if="open" class="">
		<view class="bg">
			<view class="content">
				<view class="head">
					详情
					<image @click="handleClose" src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/guanbi.png" mode=""></image>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/xiangmu.png" mode=""></image>
						<view class="">服务项目：</view>
					</view>
					<view class="item-right">
						宠物食品满300元减50，宠物食品满300元减50
					</view>
				</view>
				
				<view class="item">
					<view class="item-left">
						<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/fuwushang.png" mode=""></image>
						<view class="">服务商：</view>
					</view>
					<view class="item-right">
						为数宠物繁育店
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/shoujihao.png" mode=""></image>
						<view class="">手机号：</view>
					</view>
					<view class="item-right">
						17655223379
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				open:false,
				item:{},
			}
		},
		methods:{
			handleOpen(e){
				this.open = true
				this.item = e.item
			},
			handleClose(){
				this.open = false
			}
		},
	}
</script>

<style>
</style>
<style scoped lang="scss">
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1026;
		background: rgba(0, 0, 0, .5);
		.content{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding-bottom: 116rpx;
			.head{
				width: 100%;
				padding: 32rpx 0 80rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				line-height: 42rpx;
				text-align: center;
				position: relative;
				image{
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.item{
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;
				margin-bottom: 40rpx;
				&:last-child{
					margin-bottom: 0;
				}
				view{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #222222;
					line-height: 42rpx;
				}
				.item-left{
					width: 212rpx;
					display: flex;
					align-items: center;
					image{
						width: 26rpx;
						height: 26rpx;
						margin-right: 12rpx;
					}
				}
				.item-right{
					flex: 1;
				}
			}
		}
	}
</style>